<template>
      <div id="header">
            <div class="container">
                  <div class="left">
                        <div class="logo">
                              <img src="../../assets/img/logo.png" alt="">
                        </div>
                  </div>
                  <div class="right">
                        <div class="nav" v-if="!token">
                              <el-button type="success " @click="$router.push('/login')"><i class="el-icon-user "></i>登录</el-button>
                        </div>
                        <div class="nav" v-else>
                              <el-button type="danger" @click="logout"><i class="el-icon-switch-button"></i>退出</el-button>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            computed: {
                  token() {
                        return localStorage.miniToken
                  }
            },
            methods: {
                  logout() {
                        localStorage.removeItem("miniToken")
                        this.$router.push("/login")
                  }
            },
      }
</script>

<style lang="scss" scoped>
#header {
      width: 100%;
      height: 60px;
      background-color: #f3f3f3;
      .container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            align-items: center;
            .left {
                  .logo {
                        img {
                              height: 50px;
                              display: block;
                        }
                  }
            }
            .right {
                  display: flex;
                  align-items: center;
                  .nav {
                        height: 60px;
                        line-height: 60px;
                        margin: 0 10px;
                  }
            }
            
      }
}
</style>